<template>
  <div style="margin: auto; font-size: 14px">
    <!-- <div
      style="text-align: right; font-size: 14px; color: #333; line-height: 60px"
    >
      <span>请输入新密码:</span>
      <el-input
        class="ml-5"
        style="width: 200px"
        placeholder="请输入新密码"
        v-model="duration"
      ></el-input>
    </div>

    <div
      style="text-align: right; font-size: 14px; color: #333; line-height: 60px"
    >
      <span>确认新密码:</span>
      <el-input
        class="ml-5"
        style="width: 200px"
        placeholder="再次确认"
        v-model="duration"
      ></el-input>
    </div>
     -->
    <el-form
      ref="loginFormRef"
      label-width="0px"
      :model="loginForm"
      class="login_form"
      :rules="rule"
      ><el-form-item label="新密码" label-width="150px" prop="password">
        <el-input
          :placeholder="info.password"
          v-model="info.password"
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" label-width="150px" prop="repassword">
        <el-input
          :placeholder="info.repassword"
          v-model="info.repassword"
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="150px">
        <el-button class="mt-5" type="primary" @click="changePwd"
          >修改密码</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      value = this.info.repassword;
      if (value === "") {
        callback(new Error("请再次输入密码"));
        // password 是表单上绑定的字段
      } else if (value !== this.info.password) {
        // console.log(value);
        // console.log(this.info.password);
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      info: {},
      rule: {
        repassword: [
          {
            required: true,
            validator: validatePass,
            trigger: ["blur", "change"],
          },
        ],
      },
      loginForm: {},
    };
  },
  methods: {
    changePwd() {
      var data = {
        id: this.$store.state.ID,
        password: this.info.password,
        repassword: this.info.repassword,
      };
      this.$axios.post("/EmployeeInfo/changePwd", data).then((req) => {
        if (req.data) {
          this.$message.success("成功");
          this.reset()
        } else {
          this.$message.error("失败");
        }
      });
    },
    reset() {
      this.info.password = ''
      this.info.repassword = ''
    },
  },
};
</script>

<style>
</style>